<template>
    <div class="all">
        <div class="bg">  
            <van-image
                :src="user.picUrl"
            />
        </div>

        <van-row class="row1">
			<van-col span="24">
                <van-image
                    class="vimg"
                    round
                    width="95px"
                    height="90px"
                    :src="user.picUrl"
                />
                <br>
                <span class="sp">{{user.name}}</span>
                <br>
                <button class="btn" type="button">+ 关注</button>
            </van-col>
		</van-row>


        <!-- 导航标签 -->
        <van-tabs v-model:active="active">
            <van-tab title="主页"></van-tab>
            <van-tab title="歌曲"></van-tab>
            <van-tab title="专辑"></van-tab>
            <van-tab title="动态"></van-tab>
            <van-tab title="视频"></van-tab>
        </van-tabs>
        <van-row class="row2">
            <van-col span="3"></van-col>
            <van-col span="14">TA创作的代表作品</van-col>
            <van-col span="7" @click="getAll2">
                <button class="allBtn2" >
                    <van-icon name="play-circle" color="#EC4141" size="20" />&nbsp;&nbsp;播放全部
                </button>
            </van-col>

        </van-row>
        <van-row class="row3">
            <van-col span="3"></van-col>
            <van-col span="21">
                <div class="userlist" v-for="item,index in userlist" :key="index" >
                   {{index+1}}. {{item.al.name}} 
                </div>
            </van-col>
        </van-row>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useuidStore } from '@/stores/user'
import { useAListStore } from '@/stores/myartistlist'
// useAListStore

import {RequestArtistSongs,RequestArtistDetail} from "@/api/search"
import router from '@/router';


// 选中第几个导航
const active = ref(1);

// 持久化存储测试
const userstore = useuidStore()
const userstore2 = useAListStore()
let fn1 = ()=>{
  console.log("artistid>>>",userstore.artistid)
  console.log("artistsongs>>>",userstore.artistsongs)
  console.log("artistlist>>>",userstore2.Listname)
  console.log("artistlist>>>",userstore2.ListpicUrl)
}
fn1()
let fn2 = ()=>{
//   userstore.saveId()
//   userstore2.addProduct()
}

// 渲染歌手详情
let user = ref({
    picUrl:"",
    name:"",
})

let getUserDetail = async ()=> {
    let res = await RequestArtistDetail(userstore.artistid)
    // 歌手详情
    console.log(res.data.artist);

    user.value.picUrl = res.data.artist.picUrl  
    user.value.name = res.data.artist.name  
}
getUserDetail()


// 渲染歌手歌单
let userlist = ref([])

let getArtistSongs = async ()=> {
    let res = await RequestArtistSongs(userstore.artistid)
    // 歌手歌单详情
    console.log("歌手歌单详情",res.data.songs);

    console.log("第一首歌id",res.data.songs[0].al.id);

    userlist.value = res.data.songs

    // 歌手歌单存入pinia
    userstore.artistsongs = res.data.songs
    

}
getArtistSongs()

// 全部播放
const getAll2 = () => {
    console.log("跳转音乐播放器 未完成");
    
    // 跳转音乐播放器 未完成 --------------------------------------
    // router.push({path:''})  
}


</script>

<style lang="scss" scoped>
.all{
    position: relative;
    background-color: rgb(240,240,240);
    height: 140vh;
    .row1{
        text-align: center;
        background-color: white;
        width: 95%;
        border-radius: 50px;
        position: relative;
        left: 5px;
        top: -20px;
        .vimg{
            position: relative;
            top: -50px;
        }
        .sp{
            position: relative;
            top: -50px;
        }
        
        .btn{
            background: rgb(254,59,57);
            color: white;
            text-align: center;
            width: 120px;
            height: 36px;
            border-radius: 18px;
            margin-top: 10px;
            position: relative;
            top: -40px;
            border: none;
        }
    }   
    .row2{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 550;

        .allBtn2 {
        outline: none;
        border: none;
        background: white;
        font-size: 14px;
        display: flex;
        align-items: center;
    }
    }
    .userlist{
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

</style>